<template>
  <div class="setting">
    <blank-box title="设置">
      <template #content>
        <el-row>
          <el-col :span="12">
            <el-form ref="form" :model="userForm" label-width="80px">
              <el-form-item label="头像">
                <el-upload
                    :action="baseUrl+`/upload/img`"
                    accept="image/*"
                    :on-success="handleUploadCoverSuccess"
                    :show-file-list="false">
                  <el-avatar v-if="userForm.avatar" :size="50" :src="userForm.avatar | filterImg"></el-avatar>
                </el-upload>
              </el-form-item>
              <el-form-item label="账号">
                <el-input v-model="userForm.username" disabled></el-input>
              </el-form-item>
              <el-form-item label="昵称">
                <el-input v-model="userForm.nickname"></el-input>
              </el-form-item>
              <el-form-item label="新密码">
                <el-input v-model="userForm.newPassword" show-password></el-input>
              </el-form-item>
              <el-form-item label="简介">
                <el-input type="textarea" v-model="userForm.description"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSave">保存</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </template>
    </blank-box>
  </div>
</template>

<script>
import BlankBox from "../../components/BlankBox";
import {getUserById, updateUser} from "@/api/user";

export default {
  name: "setting",
  components: {BlankBox},
  data() {
    return {
      publicCatelog: true,
      user: this.$store.getters.user,
      userForm: {
        id: '',
        avatar: '',
        username: '',
        description: '',
        password: undefined,
        newPassword: undefined
      },
      newPassword: undefined
    }
  },
  computed: {
    baseUrl() {
      return process.env.VUE_APP_IMG_SERVER
    }
  },
  methods: {
    getUser() {
      getUserById(this.user.id).then(response => {
        this.userForm = response.data.data
      })
    },
    updateUser() {
      let user = Object.assign({},this.userForm)
      delete user.password
      if(user.newPassword && user.newPassword!=''){
        user.password = user.newPassword
      }
      updateUser(user).then(response => {
        if (response.data.code === 20000) {
          this.$notify({
            title: 'Success',
            message: 'Update Successfully',
            type: 'success',
            duration: 2000
          })
          // this.$store.commit('user/SET_USER', this.userForm)
          this.$store.dispatch('user/getUserInfoById')
        }
      }).catch(err => console.log(err))
    },
    handleUploadCoverSuccess(res, file, fileList) {
      let data = res.data
      if (data.path) {
        this.userForm.avatar = data.path
        console.log(this.userForm.avatar)
      }
    },
    onSave() {
      this.updateUser()
    }
  },
  created() {
    // this.userForm = Object.assign({}, this.user)
    this.getUser()
  },
}
</script>

<style scoped>
.setting {
  min-height: 50vh;
}
</style>
